<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--门店所有电瓶车的记录
        包含1.添加门店新的电瓶车信息，
            2.确认售出该电瓶车并添加上购车的用户
            3.删除添加错误的电瓶车信息
            4.展示门店所有已出售和未出售的电瓶车信息 搜索条件有 车型 门店 出厂码 用户手机号 销售时间段
    -->
    <title>门店电瓶车管理页面</title>
    <!--加载layui的css样式-->
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-table-cell {
            height: 80px;
            line-height: 80px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!--搜索菜单栏-->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <!--搜索条件-->
            <div class="layui-form-item">
                <label class="layui-form-label">电车型号：</label>
                <div class="layui-input-inline">
                    <!--电车型号下拉框-->
                <select name="goodsname" id="goodsname" required placeholder="请选择型号" autocomplete="off"></select>
            </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">门店：</label>
                <div class="layui-input-inline">
                    <!--门店下拉框-->
                    <select name="school" id="school" required placeholder="请选择型号" autocomplete="off"></select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">出厂码：</label>
                <div class="layui-input-block">
                    <input type="text" name="carcode" id="carcode" placeholder="请输入" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号：</label>
                <div class="layui-input-block">
                    <input type="text" name="telephone" id="telephone" placeholder="请输入" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否卖出：</label>
                <div class="layui-input-block">
                    <!--门店下拉框-->
                    <select name="isell" id="issell" required placeholder="请选择型号" autocomplete="off">
                        <option value="">全部</option>
                        <option value="0">未售出</option>
                        <option value="1">售出</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">销售时间：</label>
                <div class="layui-input-inline">
                    <input type="text" name="begintime" id="begintime" placeholder="yyyy-MM-dd" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">—</label>
                <div class="layui-input-inline">
                    <input type="text" name="endtime" id="endtime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--搜索按钮-->
            <div class="layui-inline">
                <button id="carmessage-searchbtn" class="layui-btn layuiadmin-btn-admin" lay-submit
                        lay-filter="LAY-user-back-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
        <!--添加新的电瓶车商品信息-->
        <div class="layui-button">
            <button id="addcarmessage" class="layui-btn layui-btn-nomal">
                <i class="layui-icon  layuiadmin-button-btn">新增电车</i>
            </button>
        </div>
    </div>
    <!--查询出的所有电车商品信息栏---------------------------------------------------------------------------------------->
    <div class="layui-card-body">
        <table class="layui-hide" id="carmessage" lay-filter="carmessage-filter"></table>
        <!--前缀编号-->
        <script type="text/html" id="addList">
            {{d.LAY_TABLE_INDEX+1}}
        </script>
        <!--layui的js包-->
        <script src="/aaa/layuiadmin/layui/layui.js"></script>
        <!--操作按键-->
        <script type="text/html" id="carmessage-bar">
            <a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="carmessage-del">删除</a>
            {{#if (d.issell == 0) { }}
            <a class="layui-btn  layui-btn-xs" lay-event="carmessage-sell">售出</a>
            {{# }else if(d.issell == 1){ }}
            {{# } }}
        </script>
    </div>
</div>
</div>


<!--------------------------------------弹出添加新电瓶车入库窗口---------------------------------------------------------------------------------------------------------------------->

<div class="x-body" style="display:none;" id="carmessage-layer" width="50px">
    <!--form表单展示过户的详情-->
    <form class="layui-form" id="addform" lay-filter="detailmessage">
        <div class="layui-form-item">
            <label class="layui-form-label">电车型号：</label>
            <div class="layui-input-inline">
                <!--电车型号下拉框-->
                <select name="goodsname" id="store-goodsname" required placeholder="请选择型号" autocomplete="off"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">门店：</label>
            <div class="layui-input-inline">
                <!--门店下拉框-->
                <select name="schoolid" id="store-school" required placeholder="请选择型号" autocomplete="off"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出厂码：</label>
            <div class="layui-input-inline">
                <input type="text" name="carcode" id="store-carcode" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">出厂日期：</label>
            <div class="layui-input-inline">
                <input type="text" name="buildtime" id="store-bulidtime" placeholder="yyyy-MM-dd" class="layui-input">
            </div>
        </div>



        <!--保存认证的信息-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="carmessage-layer">确认添加</button>
            </div>
        </div>

    </form>
</div>



<!--------------------------------------弹出添完善车辆车主信息表---------------------------------------------------------------------------------------------------------------------->

<div class="x-body" style="display:none;" id="storecarmessage" width="50px">
    <!--form表单展示过户的详情-->
    <form class="layui-form" id="fillform" lay-filter="detailmessage">
        <div class="layui-form-item">
            <label class="layui-form-label">电车型号：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsname" id="car-goodsname" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input"  disabled="disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出厂码：</label>
            <div class="layui-input-inline">
                <input type="text" name="carcode" id="car-carcode" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input"  disabled="disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户账号：</label>
            <div class="layui-input-inline">
                <input type="text" name="telephone" id="car-telephone" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">操作员工：</label>
            <div class="layui-input-inline">
                <input type="text" name="employeeid" id="car-employeeid" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input" >
            </div>
        </div>



        <!--保存认证的信息-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="sellcarmessage-layer">确认提交用户信息</button>
            </div>
        </div>

    </form>
</div>
<div id="" style="display: none">


</div>
</div>
<!--自定义模板区分是否车辆卖出-->
<script type="text/html" id="state">
    {{#if (d.issell == 0) { }}
    <span style="color: red">未售出</span>
    {{# }else if(d.issell == 1){ }}
    <span  style="color: green">售出</span>
    {{# } }}
</script>

<script th:inline="none">
    layui.use(['table', 'laytpl', 'form','upload','laydate'], function () {
        var table = layui.table;
        var laytpl = layui.laytpl;
        var form = layui.form;
        var upload = layui.upload;
        var laydate= layui.laydate;
        var $ = layui.$;
        //时间控件监控
        laydate.render({
            elem:'#begintime',
            type:'datetime'
        });
        laydate.render({
            elem:'#endtime',
            type:'datetime'
        });
        laydate.render({
            elem:'#store-bulidtime',
            type:'datetime'
        });
        table.render({
            //连接搜索栏
            elem: '#carmessage',
            height: 400,
            //跳转的地址信息
            url: '/aaa/StoreCarMessageController/GetStoreMessage',
            //分页功能
            page: true,
            //列表中所查询的信息
            cols: [
                [
                    {field: 'add', title: '编号', align: 'center', templet: '#addList', width: 50},
                    {field: 'school', title: '门店', align: 'center'},
                    {field: 'goodsname', title: '电车型号', align: 'center'},
                    {field: 'carcode', title: '出厂码', align: 'center'},
                    {field: 'buildtime', title: '生产日期', align: 'center'},
                    {field:'issell',title:'是否售出',align:'center',templet: '#state',sort:true},
                    {field: 'selltime', title: '售出时间', align: 'center'},
                    {field: 'name', title: '销售员工', align: 'center'},
                    {title: '操作', toolbar: '#carmessage-bar', align: 'center'},
                ]
            ],
        })   ;


        //搜索框点击事件-----------------------------------------------------------------------------------------------
        $('#carmessage-searchbtn').click(function () {
            table.reload('carmessage', {
                url: '/aaa/StoreCarMessageController/GetStoreMessage',
                where: {
                    goodsname: $("#goodsname").val(),
                    schoolid:$("#school").val(),
                    carcode:$("#carcode").val(),
                    telephone:$("#telephone").val(),
                    issell:$("#issell").val(),
                    begintime:$("#begintime").val(),
                    endtime:$("#endtime").val()
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        });
        //动态获取门店下拉框
        $.ajax({
            type : "post",
            url : "/aaa/SecondCarEntrepotController/Getschool",
            dataType : "json",
            async : false,
            success : function(data) {
                // console.log(data);
                for(var i=0;i<data.length;i++){
                    // alert(data[i].school)
                    var html="";
                    html = "<option value='"+data[i].id+"'>"+data[i].school+"</option>";
                    $("#school").append(html);
                    $("#store-school").append(html);
                }
            },
            error : function(result, status) {
            }
        });
        //动态获取电车型号
        $.ajax({
            type : "post",
            url : "/aaa/SecondCarEntrepotController/Getgoodsname",
            dataType : "json",
            async : false,
            success : function(data) {
                // console.log(data);
                for(var i=0;i<data.length;i++){
                    var html="";
                    html = "<option value='"+data[i].goodsname+"'>"+data[i].goodsname+"</option>";
                    $("#goodsname").append(html);
                    $("#store-goodsname").append(html);
                }

            },

            error : function(result, status) {
                return false;
            }

        });

        //所有表格中按钮点击事件-----------------------------------------------------------------------------------------------
        //监控数据表格
        table.on('tool(carmessage-filter)', function (obj) {
            var data = obj.data;
            //详情按钮触发的事件----------------------------------------
            //查询对应的二手车认证信息表单内容----------------------------------------------
            if (obj.event === 'carmessage-del') {
                //删除已经电瓶车商品--------------------------------------------------------------
                layer.confirm('确定要删除型号为"  '+data.goodsname+' 和出厂码为 '+data.carcode+'"  的车辆信息吗？', function(index) {
                    $.post("/aaa/StoreCarMessageController/DelStoreCar", {
                        "goodsname":data.goodsname,
                        "carcode":data.carcode,
                    }, function(res) {
                        if(res.code==100){

                            location.reload();
                            layer.msg('已经删除该商品',{icon:1,time:1000});
                        }else{

                            layer.msg('删除失败',{icon:1,time:1000});
                        }

                    });
                });


            }
            else if(obj.event === 'carmessage-sell'){
                //获取对应车辆的车型及出厂码
                $("#car-goodsname").val(data.goodsname);
                $("#car-carcode").val(data.carcode);
                //打开填写用户信息的弹窗
                secondcarentrepotlayer = layer.open({
                    type: 1,
                    title: '完善电车信息',
                    shade: [0.3, '#393D49'],
                    maxmin: false,
                    shadeClose: false,
                    area: ['893px', '550px'],
                    //打开的弹出层
                    content: $('#storecarmessage')
                });
            }
        });

        //form表单监控，监控提交按钮
        //将表单中新电瓶车商品信息添加入车辆总表
        form.on('submit(carmessage-layer)', function (data) {
            var param = data.field;//定义临时变量获取表单提交过来的数据，非json格式
            console.log(param);
            $.ajax({
                url: "/aaa/StoreCarMessageController/AddNewStoreCar",
                method: 'post',//method请求方式，get或者post
                dataType: 'json',//预期服务器返回的数据类型
                data: param,//表格数据序列化
                success: function (res) {//res为相应体,function为回数
                    if (res.code==100) {
                        layer.closeAll();
                        layer.msg('已提交新的车辆信息',{icon:1,time:3000});
                        location.reload();

                    }else if(res.code==200){

                        layer.msg('失败，操作员工与门店不符',{icon:1,time:3000});

                    }else if(res.code==300){

                        layer.msg('失败，出厂码重复',{icon:1,time:30000});

                    }
                }
            });

            return false;
        });
        //form表单监控，监控提交按钮
        //将表单中新电瓶车商品信息添加入车辆总表
        form.on('submit(sellcarmessage-layer)', function (data) {
            var param = data.field;//定义临时变量获取表单提交过来的数据，非json格式
            console.log(param);
            $.ajax({
                url: "/aaa/StoreCarMessageController/AddCarUser",
                method: 'post',//method请求方式，get或者post
                dataType: 'json',//预期服务器返回的数据类型
                data: param,//表格数据序列化
                success: function (res) {//res为相应体,function为回数
                    if (res.code==100){
                        layer.closeAll();
                        layer.msg('已提交车主信息',{icon:1,time:3000});
                        location.reload();
                    }

                }
            });
            return false;

        });

        //添加新电瓶车入库窗口按钮
        $(document).on('click','#addcarmessage',function(){
            layer.msg('hello');
            carmessagelayer = layer.open({
                type: 1,
                title: '添加新车入库',
                shade: [0.3, '#393D49'],
                maxmin: false,
                shadeClose: false,
                area: ['893px', '550px'],
                //打开的弹出层
                content: $('#carmessage-layer')
            });
        });

        //加载form表单所需控件
        form.render();
    });
</script>

</body>
</html>